<template>
    <div id="tmpl">
        <!--1.0 图片分类-->    
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="item in cates" :key="item.id" @click="getimages(item.id)">{{item.title}}</li>
            </ul>
        </div>

    
        <!--2.0 图片列表-->
        <div id="imglist">   
            <ul>
                <li v-for="item in list" :key="item.id">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy="item.img_url">
                    <div id="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>

</template>
<script>
import common from '../../kits/common.js'
import { Toast } from 'mint-ui';

export default {
  data () {
    return {
        ulWidth:320,
        cates: [], //用来储存数据的数组
        list:[]
    };
  },
  created(){
      this.getcates();

      var all = 0;
      this.getimages(all);
  },
  methods:{
      //加载图片数据
      getimages(cateid){
          //如果cateid参数没有传递。则默认是0，代表获取所有图片数据
          cateid = cateid || 0;

          var url = this.$common.apidomain + '/api/getimages/' + cateid;

          this.$http.get(url).then(function(res){
              if(res.body.status !=0){
                  Toast(res.body.message);
                  return;
              }
              this.list = res.body.message;
          });
      },

      getcates(){
          var url = this.$common.apidomain + '/api/getimgcategory';
          this.$http.get(url).then(function(res){
              if(res.body.status !=0){
                  Toast(res.body.message);
                  return;
              }

              this.cates = res.body.message;

              var w = 62;
              var count = res.body.message.length + 1;
              this.ulWidth = w * count;
          })
      }
  }
}
</script>
<style scoped>
    /*1.0 图片分类*/

    #cate {
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
    }

    #cate ul {
        cursor: pointer;
        margin: 0px;
        padding-left: 10px;
    }

    #cate li {
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 14px;
        padding-left: 6px;
    }
  
    /*实现图片列表样式*/

    #imglist ul {
        padding-left: 0px;
    }

    #imglist li {
        list-style: none;
        position: relative;
    }

    #imglist img {
        width: 100%;
        height: 300px;
    }

    #desc {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 2px;
        left: 0px;
    }

    #desc h5 {
        color: #ffffff;
        font-weight: bold;
    }

    #desc p {
        color: #fff;
    }

</style>